<template>
    <view class="withdraw-container">
        <view class="title">{{$t('mine.wallet.withdraw.title')}}</view>
        <view class="input-wrap">
            <view class="label">$</view>
            <view class="content">
                <wd-input
                    v-model="amount"
                    placeholder=""
                    placeholderStyle="font-size:40rpx;font-weight:600"
                    no-border
                    clearable
                />
            </view>
        </view>
        <view class="form-tips">
            {{$t('mine.wallet.withdraw.balance')}} ${{ formatAmount(userInfo.balance - userInfo.freezeBalance) }}
            <view class="all-text" @click="onAllWithdrawals">{{$t('mine.wallet.withdraw.all')}}</view>
        </view>
        <view :class="['btns', amount && 'active']" @click="onSubmit">{{$t('mine.wallet.withdraw.withdraw')}}</view>
    </view>
    <uni-popup ref="passwordRef">
        <VerifyPassword @onSuccess="onSuccess" type="component" />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import VerifyPassword from './verifyPassword.vue';
import { getStorage, setStorage, formatAmount } from '@/utils/common';
import { addWithdraw } from '@/api/mine';
const emits = defineEmits(['onClose']);
const amount = ref<number>() as any;
const passwordRef = ref(null) as any;
const userInfo = ref({}) as any;
const bankInfo = ref({}) as any;
onLoad(() => {
    userInfo.value = getStorage('user') || {};
    bankInfo.value = getStorage('bankInfo') || {};
});
//提交
const onSubmit = () => {
    passwordRef.value.open('bottom');
};

//验证成功回调
const onSuccess = async (password:string) => {
    const res = await addWithdraw({ amount: amount.value, bankId: bankInfo.value.address, cashPwd: password });
    if (res.code !== 200) return false;
    let data = { ...userInfo.value };
    data.freezeBalance = parseInt(data.freezeBalance) + parseInt(amount.value);
    userInfo.value=data;
    setStorage('user', data);
    emits('onClose');
    
};

//全部提现
const onAllWithdrawals = () => {
    amount.value = userInfo.value.balance;
};
</script>
<style lang="scss" scoped>
.withdraw-container {
    background: #fff;
    height: 580rpx;
    border-radius: 30rpx 30rpx 0 0;
    padding: 0 30rpx;
    .title {
        padding: 70rpx 0;
        text-align: center;
        font-size: 46rpx;
        font-weight: 600;
    }
    .input-wrap {
        display: flex;
        align-items: center;
        height: 100rpx;
        border-bottom: 1rpx solid #e5e5e5;
        .label {
            width: 40rpx;
            font-size: 40rpx;
            font-weight: 600;
        }
        .content {
            flex: 1;
        }
    }
    ::v-deep .wd-input__inner {
        font-size: 40rpx;
        font-weight: 600;
    }
    .form-tips {
        margin-top: 30rpx;
        display: flex;
        font-size: 28rpx;
        .all-text {
            margin-left: 20rpx;
            color: #0866ff;
        }
    }

    .btns {
        margin-top: 60rpx;
        background: #e4e6eb;
        color: #bcc0c4;
        height: 98rpx;
        display: flex;
        border-radius: 24rpx;
        align-items: center;
        justify-content: center;
    }
    .active {
        background: #0866ff;
        color: #fff;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>
